<!-- 知识库 -->
<script lang="ts" setup>
import InKnowledge from './components/InKnowledge.vue'
import { ref, onMounted } from 'vue'
// import router from '@/router'
import { useOffSetTopStore } from '@/stores/modules/offsetTop'

// 仓库
const offsetTopStore = useOffSetTopStore()

const KnowledgeBaseBox = ref()
const offsetTop = ref(0)

// 获取距离顶部距离，并存入仓库
const getOffsetTop = () => {
  offsetTop.value = KnowledgeBaseBox.value.offsetTop
  offsetTopStore.setOffSetTop('K', offsetTop.value)
}
// 跳转
// const goMore = () => {
//   router.push('./MoreKnowledge')
// }

onMounted(() => {
  getOffsetTop()
})
</script>

<template>
  <div ref="KnowledgeBaseBox" class="box">
    <el-header class="wrapper">
      <h3>知识分享</h3>
      <p>传递经验与智慧，促进学习与成长，提升个人和团队能力</p>
    </el-header>
    <el-main class="wrapper" style="padding: 0">
      <InKnowledge></InKnowledge>
    </el-main>
  </div>
</template>

<style lang="scss" scoped>
.box {
  ::-webkit-scrollbar {
    display: none;
  }
  box-sizing: border-box;
  min-width: 1270px;
  height: 750px;
  background-color: #003333;
  .el-header {
    padding: 60px 50px 0;
    width: 1175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 175px;
    h3 {
      font-size: 32px;
      font-weight: 400;
      color: #ffffffda;
      margin-bottom: 10px;
    }
    p {
      font-size: 16px;
      font-weight: 400;
      color: #c5c3c3;
    }
  }
}
</style>
